<template>
	<view class="content">
		<view class="list">
			<u-form :model="form" ref='myForm' :rules="rules">
				<u-form-item label="邮箱" prop="email" label-width="100rpx">
					<u-input v-model="form.email" type="string" placeholder="请输入邮箱"></u-input>
					

					
				</u-form-item>
				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
				@change="codeChange"></u-code>
				<u-button @tap="getCode" type="primary">{{tipss}}</u-button>
				
				<u-form-item label="验证码" prop="graphicVerifyCode" label-width="100rpx">
					<u-input v-model="form.graphicVerifyCode" type="string" placeholder="请输入验证码"></u-input>
				</u-form-item>
				<u-form-item label="密码" prop="passWord" label-width="100rpx">
					<u-input v-model="form.passWord" type="password" placeholder="请输入密码"></u-input>
				</u-form-item>
				
			</u-form>
			<button @click="submit" class="button-login" hover-class="button-hover">确定</button>
		</view>
	</view>
</template>

<script>
import request from '../../request.js'
	export default {
		data() {
			return {
				tipss: '',
				seconds: 60,
				realType: "去认证",
				form: {
					email: "",
					passWord: "",
					graphicVerifyCode: ""
				},
				rules: {
					graphicVerifyCode: [{
						
								required: true,
								message: "请输入验证码",
								errorMessage: '请输入验证码',
							
						}],
					
					email: [{
						required: true,
						message: "请输入邮箱",
						trigger: "change"
					}],
					passWord: [{
						required: true,
						message: "请输入密码,最少为6位",
						trigger: 'change',
						min: 6
					}
					]

				}
			}
		},
		onLoad() {

		},
		methods: {
			
			codeChange(text) {
							this.tipss = text;
						},
						getCode() {
									if (this.form.email != null && this.form.email != "") {
			
										request({
											url: '/systemuser/user/getCheckCode/'+this.form.email,
											method: 'POST',
											dataType: 'json',
											success: (res) => {
												  if(res.data.code =='20000'){
												if(this.$refs.uCode.canGetCode) {
													// 模拟向后端请求验证码
													uni.showLoading({
														title: '正在获取验证码'
													})
													setTimeout(() => {
														uni.hideLoading();
														// 这里此提示会被this.start()方法中的提示覆盖
														uni.$u.toast('验证码已发送');
														// 通知验证码组件内部开始倒计时
														this.$refs.uCode.start();
													}, 2000);
												} else {
													uni.$u.toast('倒计时结束后再发送');
												}
												}
			
							
											},
										})
									} else {
										uni.showModal({
											content: '请输入邮箱!',
											showCancel: false
										});
									}
							
			
						},
						
						submit() {
							this.$refs.myForm.validate().then(res => {
								console.log('表单数据信息：', res);
								// 判断用户名重复
								request({
									url: '/systemuser/user/updatePwd',
									data: this.form,
									method: 'POST',
									success: (res) => {
										console.log(res)
										// if (res.data.code == 20001) {
										// 	console.log(res.data)
										// 	uni.showToast({
										// 		title: '邮箱不存在',
										// 		icon: 'error'
										// 	})
										// } 
										 if (res.data.code == 20000) {
											console.log(res.data)
											uni.showToast({
												title: '修改成功',
												icon: 'success'
											})
											/* 页面跳转 */
											setTimeout(() => {
												uni.navigateTo({
													url: './login'
												})
											}, 1000)
										} else {
											uni.showToast({
												title: '修改失败,验证码失效或者邮箱不存在',
												icon: 'error'
											})
										}
									}
								})
							}).catch(err => {
								console.log('表单错误信息：', err);
							})
						},
		
			// submit() {
			// 	this.$refs.myForm.validate(valid => {
			// 		if (!this.form.email) {
			// 			return uni.showToast({
			// 				title: '请输入邮箱'
			// 			})
			// 		}
			// 		if (!this.form.passWord) {
			// 			return uni.showToast({
			// 				title: '请输入密码'
			// 			})
			// 		}
			// 		if (!this.form.graphicVerifyCode) {
			// 			return uni.showToast({
			// 				title: '请输入验证码'
			// 			})
			// 		}
			// 		if (valid) {
			// 			console.log('验证通过');
			// 			//验证通过就登录
			// 			this.$axios({
			// 				url: 'cf/user/upPwd',
			// 				data: this.form,
			// 				method: 'POST',
			// 				success: (res) => {
			// 					if (res.data.flag == true) {
			// 						console.log(res)
			// 						uni.showToast({
			// 							title: '修改成功',
			// 							icon: 'success'
			// 						})
			// 						/* 页面跳转 */
			// 						setTimeout(() => {
			// 							//跳转非pages.json>tabbar>配置过的页面，使用navigateTo
			// 							uni.switchTab({
			// 								url: ""
			// 							})
			// 						}, 1000)
			// 					} else {
			// 						uni.showToast({
			// 							title: '修改失败',
			// 							icon: 'error'
			// 						})
			// 					}
			// 				}
			// 			})
			// 		} else {
			// 			console.log('验证失败');
			// 		}
			// 	});
			// }

		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(55, 255, 212, 0.8), rgba(51, 255, 64, 0.8));
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}
</style>
